import React, {useState} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import {Layout, Menu, Breadcrumb} from 'antd';
import {
    FileOutlined,
    TeamOutlined,
    UserOutlined, OrderedListOutlined, SearchOutlined, LogoutOutlined,
} from '@ant-design/icons';
import {Route,Switch} from "react-router-dom";
import ResourceList from "../../components/admin/resource/resourceList";
import RoleList from "../../components/admin/role/roleList";
import User from "../../components/admin/user";
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
const getList =()=>[
    getItem('用户管理', '1', <UserOutlined/>),
    getItem('角色管理', 'sub2', <TeamOutlined />, [
        getItem('查看对应资源', '6',<SearchOutlined />)]),
    getItem('资源管理', '9', <FileOutlined />,[
        getItem('查看资源列表','10',<OrderedListOutlined />)]),
    getItem('回到首页',11,<LogoutOutlined />)
];

const Admin =(props)=> {
    const[collapsed,setCollapsed] =useState(false)
    const onCollapse = (collapsed) => {
       setCollapsed(collapsed)
    };
    //渲染左侧列表
    const renderMenu=(list)=>{
        return list.map(item=>{
            if(item.children?.length>0){//如果有子item
                return <SubMenu key={item.key}  title={item.label} icon={item.icon}>
                    {renderMenu(item.children)}
                    {/*    递归渲染展开的item*/}
                </SubMenu>
            }
            else
                return <Menu.Item key={item.key} icon={item.icon} onClick={()=>{
                    // if(item.key===11)
                        // props.history.replace('/index')
                    // else
                        props.history.replace(`/admin/${item.key}`)
                }
                }>
                    {item.label}
                </Menu.Item>
        })
    }
        return (
            <Layout
                style={{
                    minHeight: '100vh',
                }}
            >
                <Sider className={'sider'} collapsible collapsed={collapsed} onCollapse={onCollapse}>
                    <div className="logo" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        {
                            renderMenu(getList())
                        }
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header
                        className="site-layout-background"
                        style={{
                            padding: 0,
                        }}
                    />
                    <Content
                        style={{
                            margin: '0 16px',
                        }}
                    >
                        <Breadcrumb
                            style={{
                                margin: '16px 0',
                            }}
                        >
                            {/*<Breadcrumb.Item>User</Breadcrumb.Item>*/}
                            {/*<Breadcrumb.Item>Bill</Breadcrumb.Item>*/}
                        </Breadcrumb>
                        <div
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                minHeight: 500,
                            }}
                        >
                            <Switch>
                                <Route exact path={'/admin'} component={User}/>
                                <Route path={'/admin/1'} component={User}/>
                                <Route path={'/admin/6'} component={RoleList}/>
                                <Route path={'/admin/10'} component={ResourceList}/>
                            </Switch>
                        </div>
                    </Content>
                    <Footer
                        style={{
                            textAlign: 'center',
                        }}
                    >
                        baiBlog ©2022 Created by baiBlog Team
                    </Footer>
                </Layout>
            </Layout>
        );
}

export default Admin;
